var question1 = new Array(
    "1", "7", "9", "16", "20", "23", "28", "32", "35", "40"
);
var question2 = new Array(
    "2", "8", "11", "14", "17", "24", "25", "30", "34", "39"
);
var question3 = new Array(
    "3", "6", "10", "13", "19", "22", "26", "31", "33", "38"
);
var question4 = new Array(
    "4", "5", "12", "15", "18", "21", "27", "29", "36", "37"
);

var resultquestion = new Array(
"12345678910111213141516171819202122232425262728293031323334353637383940"
);

$(function() {            
    var lii = '';
    $.each(question1, function(key, val) {
        lii += '<li id="'+val+'" class="'+key+'" sapxep="'+val+'"><img src="images/'+val+'.jpg" /></li>';
    });
    $.each(question2, function(key, val) {
        lii += '<li id="'+val+'" class="'+key+'" sapxep="'+val+'"><img src="images/'+val+'.jpg" /></li>';
    });
    $.each(question4, function(key, val) {
        lii += '<li id="'+val+'" class="'+key+'" sapxep="'+val+'"><img src="images/'+val+'.jpg" /></li>';
    });
    $.each(question3, function(key, val) {
        lii += '<li id="'+val+'" class="'+key+'" sapxep="'+val+'"><img src="images/'+val+'.jpg" /></li>';
    });

    $('#sortable').append(lii);        
    
    $('#sortable li').livequery('click', function() {
        $this = $(this);
        // remove css of image not click
        $('#sortable li img').css({
            'filter':'alpha(opacity=100)',  
            'opacity':'1'
        });
        // add alpha for image click
        $this.children("img").css({
            'filter':'alpha(opacity=40)',  
            'opacity':'0.4'
        });  
        // get image clicked
        var click_one = $('#NumberChoose').html();        
        
        if (click_one != '-1') {
            // mark default
            $('#NumberChoose').html('-1');
            // remove css of image not click
            $('#sortable li img').css({
                'filter':'alpha(opacity=100)',  
                'opacity':'1'
            });
            // swap
            var divCO = '#'+click_one;
            $this.swap(divCO);
        } else {
            // mark id click
            $('#NumberChoose').html($this.attr('id'));            
        }
    });

    //$( "#sortable" ).sortable({
    //                    connectWith: "ul.group",
    //                    cursor: "move"                       
    //            });
    //$( "#sortable" ).disableSelection();

    $('#submit').click(function() {
        var result = '';
        $('#sortable').children().each(function(){
                var kid = $(this);
                result += (kid.attr('id'));               
        });        
        if (jQuery.inArray(result, resultquestion) != -1) {
            $('.dialogNoteS').dialog({
                modal: true,
                buttons: {
                            Ok: function() {
                                location.replace('../puzze_2/index.html');
                            }
			}
            });
        } else {
            $('.dialogNoteE').dialog({
                modal: true,
                buttons: {
                            Ok: function() {                                
                                $( this ).dialog( "close" );
                            }
			}
            });
        }
    });
    $('#clickexampleshow').click(function () {
        $('#example').show();
    });
    $('#clickexamplehide').click(function () {
        $('#example').hide();
    });
});